<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
          <a-row type="flex" justify="start">
            <span
              v-for="status in AuditStatusArray"
              :key="status.code"
              @click="selected(status.code)"
              style="margin-right: 60px"
              :class="{'active': status.code == auditStatus}"
              class="mouseOn"
            >
              {{ status.message }}
            </span>
          </a-row>
          <a-row type="flex" justify="start" style="margin: 20px 0" >
            <a-col :span="4" style="margin-right: 10px">
              <a-input v-model="value" placeholder="输入关键字" allow-clear></a-input>
            </a-col>
            <a-col :span="4">
              <a-config-provider :auto-insert-space-in-button="false">
                <a-button type="primary" @click="toSearch">
                  查找
                </a-button>
              </a-config-provider>
            </a-col>
          </a-row>
        </div>
      <a-table
        :scroll="{ x: 1500}"
        :columns="columns"
        :data-source="info"
        bordered
        :pagination="pagination"
        :rowKey="record=>record.id"
      >
        <div slot="content" slot-scope="text,record">
          <a @click="matchPush(record)" class="mr-15" :disabled="record.auditStatus !== 2">匹配推送</a>
          <a @click="toContent(record.id)">{{record.auditStatus === 1 ? "审核" : "查看"}}</a>
        </div>
      </a-table>
      <!-- 匹配推送 -->
      <a-modal title="匹配企业推荐" :visible="matchPushVis" okText="推送" @ok="pushCompany" @cancel="cancelPush">
        <a-table :row-selection="{ selectedRowKeys: selectMatchCompany, onChange: onSelectMCompany }" 
          :rowKey="record=>record.entId" :columns="matchColumns"  :data-source="recommCompanyInfo" bordered :pagination="false">
          <a slot="entName" slot-scope="text, record" target="_blank" title="点击可查看企业详情"
            :href="`${webHref}/aupply-chains-14-16203/entdetails?id=${record.entId}`">{{ text }}</a>
        </a-table>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { GetSearchPageList } from '@/api/MaterialDemand'
import { getRecommEntInfo, recommEntInfo } from '@/api/product'
const AuditStatusArray = [
  {
    code: "",
    message: '全部',
  },
  {
    code: 1,
    message: '审核中',
  },
  {
    code: 2,
    message: '已通过',
  },
  {
    code: 3,
    message: '未通过',
  },
]
export default {
  data() {
    return {
      value: '',
      auditStatus: '',
      AuditStatusArray: AuditStatusArray,
      matchPushVis: false,
      // webHref: 'http://10.204.124.225',
      webHref: 'https://economic.szlhq.gov.cn',
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: total => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize)
      },
      columns: [
        {
          title: '编号',
          dataIndex: 'demandNo',
          align: 'center'
        },
        {
          title: '需求名称',
          dataIndex: 'demandProductName',
          // align: 'center'
        },
        {
          title: '企业名称',
          dataIndex: 'entName',
          // align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'auditStatus',
          align: 'center',
          customRender:function (text) {
              if(text==1){
                return "审核中"
              }else if(text==2){
                return "已通过"
              }else if(text==3){
                return "未通过"
              }
            }
        },
        {
          title: '操作',
          dataIndex: 'content',
          align: 'center',
          width: 150,
          fixed: 'right',
          scopedSlots: { customRender: 'content' }
        }
      ],
      matchColumns: [
        {
          title: '企业名称',
          dataIndex: 'entName',
          scopedSlots: { customRender: 'entName' }
        }
      ],
      info: [],
      recommCompanyInfo: [],
      selectMatchCompany: [],
      productInfo: {}
    }
  },
  created() {
    this.GetSearchPageList()
  },
  methods: {
    // 打开匹配推送弹框
    matchPush(record) {
      this.productInfo = record
      let requestData = {
        entId: this.productInfo.entId,
        productOneCategory: this.productInfo.productOneCategory,
        queryStatus: 1
      }
      getRecommEntInfo(requestData).then(res => {
        if(res && res.code === 200) {
          const { data } = res
          this.recommCompanyInfo = data
          this.matchPushVis = true
        }else {
          this.$message.error('请求失败')
        }
      }).catch(err => {
        if(err) {
          this.$message.error('请求失败')
        }
      })
    },
    // 选择推送企业
    onSelectMCompany(selectedRowKeys) {
      this.selectMatchCompany = selectedRowKeys
    },
    // 推送
    pushCompany() {
      if(this.selectMatchCompany.length !== 0) {
        let requestData = []
        for(let i = 0; i < this.selectMatchCompany.length; i++) {
          requestData.splice(i, 1, {
            entId: this.selectMatchCompany[i],
            entName: this.recommCompanyInfo.find(ele => ele.entId === this.selectMatchCompany[i]).entName,
            demandNo: this.productInfo.demandNo,
            recommender: this.$store.getters.userInfo
          })
        }
        recommEntInfo(requestData).then(res => {
          if(res && res.code === 200) {
            this.$message.success('推送成功')
            this.matchPushVis = false
            this.selectMatchCompany = []
          }else {
            this.$message.error('推送失败')
          }
        }).catch(err => {
          if(err) {
            this.$message.error('请求失败')
          }
        })
      }else {
        this.$message.warning('请选择推送企业')
      }
    },
    // 取消推送
    cancelPush() {
      this.matchPushVis = false
      this.selectMatchCompany = []
    },
    toSearch(e) {
      this.pagination.current = 1
      this.GetSearchPageList(this.value,this.auditStatus);
    },
    selected(code) {
      this.pagination.current = 1
      this.auditStatus = code
      this.GetSearchPageList(this.value,this.auditStatus);
    },
    toContent(id) {
        this.$router.push({
          path: '/infoVerify/VerifyInfo',
          query:{id}
        })
    },
    // 分页搜索
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.GetSearchPageList(this.value,this.auditStatus)
    },
    // 页容量改变
    onSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.current = current
      this.GetSearchPageList(this.value,this.auditStatus)
    },
    // 获取列表
    GetSearchPageList(keyword, auditStatus) {
      let _params = {
        size: this.pagination.pageSize,
        current: this.pagination.current,
        orderTypes:5,
        keyword,
        auditStatus
      }
      GetSearchPageList(_params).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.info = res.data.records
          this.pagination.total = res.data.total;
          console.log(this.info)
        }
      })
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  color: #1890ff !important;
}
.mouseOn:hover {
  cursor: pointer;
  color: #1890ff !important;
}
</style>
